<section class="section">
  <div class="row">

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Line Chart</h5>

          <!-- Line Chart -->
          <div id="lineChart"></div>

          <script>
            new ApexCharts(document.querySelector("#lineChart"), {
              series: [{
                name: "Desktops",
                data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
              }],
              chart: {
                height: 350,
                type: 'line',
                zoom: {
                  enabled: false
                }
              },
              dataLabels: {
                enabled: false
              },
              stroke: {
                curve: 'straight'
              },
              grid: {
                row: {
                  colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
                  opacity: 0.5
                },
              },
              xaxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'],
              }
            }).render();
          </script>
          <!-- End Line Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Area Chart</h5>

          <!-- Area Chart -->
          <div id="areaChart"></div>

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Column Chart</h5>

          <!-- Column Chart -->
          <div id="columnChart"></div>

          <script>
              new ApexCharts(document.querySelector("#columnChart"), {
                series: [{
                  name: 'Net Profit',
                  data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
                }, {
                  name: 'Revenue',
                  data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
                }, {
                  name: 'Free Cash Flow',
                  data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
                }],
                chart: {
                  type: 'bar',
                  height: 350
                },
                plotOptions: {
                  bar: {
                    horizontal: false,
                    columnWidth: '55%',
                    endingShape: 'rounded'
                  },
                },
                dataLabels: {
                  enabled: false
                },
                stroke: {
                  show: true,
                  width: 2,
                  colors: ['transparent']
                },
                xaxis: {
                  categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
                },
                yaxis: {
                  title: {
                    text: '$ (thousands)'
                  }
                },
                fill: {
                  opacity: 1
                },
                tooltip: {
                  y: {
                    formatter: function(val) {
                      return "$ " + val + " thousands"
                    }
                  }
                }
              }).render();
          </script>
          <!-- End Column Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Bar Chart</h5>

          <!-- Bar Chart -->
          <div id="barChart"></div>

          <script>
              new ApexCharts(document.querySelector("#barChart"), {
                series: [{
                  data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380]
                }],
                chart: {
                  type: 'bar',
                  height: 350
                },
                plotOptions: {
                  bar: {
                    borderRadius: 4,
                    horizontal: true,
                  }
                },
                dataLabels: {
                  enabled: false
                },
                xaxis: {
                  categories: ['South Korea', 'Canada', 'United Kingdom', 'Netherlands', 'Italy', 'France', 'Japan',
                    'United States', 'China', 'Germany'
                  ],
                }
              }).render();
          </script>
          <!-- End Bar Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Pie Chart</h5>

          <!-- Pie Chart -->
          <div id="pieChart"></div>

          <script>
              new ApexCharts(document.querySelector("#pieChart"), {
                series: [44, 55, 13, 43, 22],
                chart: {
                  height: 350,
                  type: 'pie',
                  toolbar: {
                    show: true
                  }
                },
                labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E']
              }).render();
          </script>
          <!-- End Pie Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Donut Chart</h5>

          <!-- Donut Chart -->
          <div id="donutChart"></div>

          <script>
              new ApexCharts(document.querySelector("#donutChart"), {
                series: [44, 55, 13, 43, 22],
                chart: {
                  height: 350,
                  type: 'donut',
                  toolbar: {
                    show: true
                  }
                },
                labels: ['Team A', 'Team B', 'Team C', 'Team D', 'Team E'],
              }).render();
          </script>
          <!-- End Donut Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Radar Chart</h5>

          <!-- Radar Chart -->
          <div id="radarChart"></div>

          <script>
              new ApexCharts(document.querySelector("#radarChart"), {
                series: [{
                  name: 'Series 1',
                  data: [80, 50, 30, 40, 100, 20],
                }],
                chart: {
                  height: 350,
                  type: 'radar',
                },
                xaxis: {
                  categories: ['January', 'February', 'March', 'April', 'May', 'June']
                }
              }).render();
          </script>
          <!-- End Radar Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Polar Area Chart</h5>

          <!-- Polar Area Chart -->
          <div id="polarAreaChart"></div>

          <script>
              new ApexCharts(document.querySelector("#polarAreaChart"), {
                series: [14, 23, 21, 17, 15, 10, 12, 17, 21],
                chart: {
                  type: 'polarArea',
                  height: 350,
                  toolbar: {
                    show: true
                  }
                },
                stroke: {
                  colors: ['#fff']
                },
                fill: {
                  opacity: 0.8
                }
              }).render();
          </script>
          <!-- End Polar Area Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Radial Bar Chart</h5>

          <!-- Radial Bar Chart -->
          <div id="radialBarChart"></div>

          <script>
              new ApexCharts(document.querySelector("#radialBarChart"), {
                series: [44, 55, 67, 83],
                chart: {
                  height: 350,
                  type: 'radialBar',
                  toolbar: {
                    show: true
                  }
                },
                plotOptions: {
                  radialBar: {
                    dataLabels: {
                      name: {
                        fontSize: '22px',
                      },
                      value: {
                        fontSize: '16px',
                      },
                      total: {
                        show: true,
                        label: 'Total',
                        formatter: function(w) {
                          // By default this function returns the average of all series. The below is just an example to show the use of custom formatter function
                          return 249
                        }
                      }
                    }
                  }
                },
                labels: ['Apples', 'Oranges', 'Bananas', 'Berries'],
              }).render();
          </script>
          <!-- End Radial Bar Chart -->

        </div>
      </div>
    </div>

    <div class="col-lg-6">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Bubble Chart</h5>

          <!-- Bubble Chart -->
          <div id="bubbleChart"></div>

          <script>
              function generateData(baseval, count, yrange) {
                var i = 0;
                var series = [];
                while (i < count) {
                  var x = Math.floor(Math.random() * (750 - 1 + 1)) + 1;;
                  var y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;
                  var z = Math.floor(Math.random() * (75 - 15 + 1)) + 15;
                  series.push([x, y, z]);
                  baseval += 86400000;
                  i++;
                }
                return series;
              }
              new ApexCharts(document.querySelector("#bubbleChart"), {
                series: [{
                  name: 'Bubble1',
                  data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
                    min: 10,
                    max: 60
                  })
                },
                  {
                    name: 'Bubble2',
                    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
                      min: 10,
                      max: 60
                    })
                  },
                  {
                    name: 'Bubble3',
                    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
                      min: 10,
                      max: 60
                    })
                  },
                  {
                    name: 'Bubble4',
                    data: generateData(new Date('11 Feb 2017 GMT').getTime(), 20, {
                      min: 10,
                      max: 60
                    })
                  }
                ],
                chart: {
                  height: 333,
                  type: 'bubble',
                },
                dataLabels: {
                  enabled: false
                },
                fill: {
                  opacity: 0.8
                },
                xaxis: {
                  tickAmount: 12,
                  type: 'category',
                },
                yaxis: {
                  max: 70
                }
              }).render();
          </script>
          <!-- End Bubble Chart -->

        </div>
      </div>
    </div>

  </div>
</section>
